<script setup>
import { getPurchaseBoardRkhgl } from '@/api/visual/purchaseBoard'

const key = ref(1)

const optionData = ref([])
const month = computed(() => {
  const rk = optionData.value.find(item => item.db === 'rk')?.benyue
  const th = optionData.value.find(item => item.db === 'th')?.benyue
  if (rk === 0 && th === 0) return 0
  if (!th && rk > 0) return 100

  if (!rk) return 0

  return (isNaN((rk - th) / rk) ? 0 : (rk - th) / rk) * 100
})

const lastMonth = computed(() => {
  const rk = optionData.value.find(item => item.db === 'rk')?.shangyue
  const th = optionData.value.find(item => item.db === 'th')?.shangyue
  if (rk === 0 && th === 0) return 0
  if (!th && rk > 0) return 100

  if (!rk) return 0

  return (isNaN((rk - th) / rk) ? 0 : (rk - th) / rk) * 100
})

const last2Month = computed(() => {
  const rk = optionData.value.find(item => item.db === 'rk')?.qianlianyue
  const th = optionData.value.find(item => item.db === 'th')?.qianlianyue
  if (rk === 0 && th === 0) return 0
  if (!th && rk > 0) return 100

  if (!rk) return 0

  return (isNaN((rk - th) / rk) ? 0 : (rk - th) / rk) * 100
})

const option = computed(() => ({
  title: [
    {
      // 图表标题
      top: '3%',
      text: '品质合格率',
      textStyle: {
        color: '#fff'
      }
    }
  ],

  series: [
    {
      type: 'gauge', // 仪表盘类型
      name: '上月', // 用于tooltip的显示
      startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
      endAngle: -270, // 仪表盘结束角度
      center: ['20%', '50%%'], // 中心点（圆心坐标）
      radius: '50%', // 圆大小（仪表盘半径）
      clockwise: true, // 仪表盘刻度是否是顺时针增长
      // 仪表盘轴线相关配置
      axisLine: {
        show: true,
        roundCap: false, // 两端显示成圆形（背景环）
        clip: false, // 是否裁剪超出部分
        // 设置背景圆环样式
        lineStyle: {
          width: 12, // 圆环宽度
          color: [[1, '#002865']] // 圆环背景色
        }
      },
      // 仪表盘指针
      pointer: {
        show: false
      },
      // 进度设置
      progress: {
        show: true,
        overlap: false, // 多组数据时进度条是否重叠
        roundCap: true, // 是否在两端显示成圆形
        clip: false, // 是否裁掉超出部分
        // 进度条样式
        itemStyle: {
          borderWidth: 0,
          shadowColor: '',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#7980d2' // 0% 处的颜色  '#02C77E'
              },
              {
                offset: 1,
                color: '#7980d2' // 100% 处的颜色  '#017770'
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      // 仪表盘分割线
      splitLine: {
        show: false
      },
      // 刻度样式
      axisTick: {
        show: false
      },
      // 刻度标签
      axisLabel: {
        show: false
      },
      title: {
        show: false,
        show: true,
        fontSize: 16,
        offsetCenter: ['0', '140%'],
        color: '#fff'
      },
      detail: {
        // width: 50,
        // height: 14,
        fontSize: 14,
        color: 'auto'
      },
      data: [
        {
          value: lastMonth.value,
          name: '上月',
          detail: {
            // 中心title设置
            offsetCenter: ['0%', '0%'],
            color: '#01F8FF',
            formatter: '{value}%'
          }
        }
      ]
    },
    {
      type: 'gauge', // 仪表盘类型
      name: '本月', // 用于tooltip的显示
      startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
      endAngle: -270, // 仪表盘结束角度
      center: ['70%', '50%%'], // 中心点（圆心坐标）
      radius: '50%', // 圆大小（仪表盘半径）
      clockwise: true, // 仪表盘刻度是否是顺时针增长
      // 仪表盘轴线相关配置
      axisLine: {
        show: true,
        roundCap: false, // 两端显示成圆形（背景环）
        clip: false, // 是否裁剪超出部分
        // 设置背景圆环样式
        lineStyle: {
          width: 12, // 圆环宽度
          color: [[1, '#002865']] // 圆环背景色
        }
      },
      // 仪表盘指针
      pointer: {
        show: false
      },
      // 进度设置
      progress: {
        show: true,
        overlap: false, // 多组数据时进度条是否重叠
        roundCap: true, // 是否在两端显示成圆形
        clip: false, // 是否裁掉超出部分
        // 进度条样式
        itemStyle: {
          borderWidth: 0,
          shadowColor: '',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#62bb86' // 0% 处的颜色  '#02C77E'
              },
              {
                offset: 1,
                color: '#62bb86' // 100% 处的颜色  '#017770'
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      // 仪表盘分割线
      splitLine: {
        show: false
      },
      // 刻度样式
      axisTick: {
        show: false
      },
      // 刻度标签
      axisLabel: {
        show: false
      },
      title: {
        show: true,
        fontSize: 16,
        offsetCenter: ['0', '140%'],
        color: '#fff'
      },
      detail: {
        // width: 50,
        // height: 14,
        fontSize: 14,
        color: 'auto'
      },
      data: [
        {
          value: month.value,
          name: '本月',
          detail: {
            // 中心title设置
            offsetCenter: ['0%', '0%'],
            color: '#01F8FF',
            formatter: '{value}%'
          }
        }
      ]
    }
  ]
}))

const loadData = async () => {
  const { data } = await getPurchaseBoardRkhgl()
  optionData.value = data
}
onMounted(loadData)

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++
    }, 100)
  })
}

onMounted(loadData)

onMounted(() => {
  setTimeout(() => {
    key.value++
  }, 200)
  window.addEventListener('resize', keyResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', keyResize)
})
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box10 :key="key">
      <ps-chart2 :option="option" />
    </dv-border-box10>
  </div>
</template>

<style scoped lang="scss"></style>
